import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Footer extends Component {
	static propTypes = {
		clearAllDone:PropTypes.func.isRequired,
		todos:PropTypes.array.isRequired,
		checkAll:PropTypes.func.isRequired
	}
	render() {
		//计算总数
		const total = this.props.todos.length
		//计算已完成
		const doneTotal = this.props.todos.reduce((preValue,current)=> preValue + (current.done ? 1 : 0),0)
		
		//计算勾不勾全选
		const isAll = (total === doneTotal) && total>0
		return (
			<div className="todo-footer">
				<label>
					<input type="checkbox" checked={isAll} onChange={this.handleCheckAll}/>
				</label>
				<span>
					<span>已完成{doneTotal}</span> / 全部{total}
				</span>
				<button className="btn btn-danger" onClick={this.handleClearAllDone}>清除已完成任务</button>
			</div>
		)
	}
	//清除已经完成按钮的回调
	handleClearAllDone = ()=>{
		this.props.clearAllDone()
	}
	//全选 or 取消全选
	handleCheckAll = (event)=>{
		this.props.checkAll(event.target.checked)
	}
}
